<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>酒店预订,酒店价格查询</title>
    <jsp:include page="../public/danhang.jsp"/>
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="hotelIndex.css">
    <%--layui css--%>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body>

<div id="xc-content">
    <div class="xc-content-left">
        <div class="xc-content-left-search">
            <div class="xc-content-left-top" >
                <p><b></b><b>搜索国内酒店</b></p>
            </div>

            <form class="xc-content-select">
                <input type="radio" name="sele" value="hotel">酒店
                <input type="radio" name="sele" value="home">客栈民宿
            </form>

            <form class="form-search" action="/api/hotel/selectHotelList" method="get">
            <div class="xc-content-input">
                <table cellspacing="0" cellpadding="0" class="searchbox">
                    <colgroup>
                        <col>
                        <col class="col2">
                        <col class="col3">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <th>目的地</th>
                        <td colspan="3"><input autocomplete="on"placeholder="上海" type="text" name="hotel_local"></td>
                    </tr>
                    <tr>
                        <th>入住日期</th>
                        <td colspan="3"><input type="date" value="2020-08-03"></td>
                    </tr>
                    <tr>
                        <th>退房日期</th>
                        <td colspan="3"><input type="date" value="2020-08-04"></td>
                    </tr>
                    <tr>
                        <th>房间数</th>
                        <td >
                            <select class="room-sel">
                                <option value="room">1间</option>
                                <option value="room">2间</option>
                                <option value="room">3间</option>
                                <option value="room">4间</option>
                                <option value="room">5间</option>
                                <option value="room">6间</option>
                                <option value="room">7间</option>
                                <option value="room">8间</option>
                                <option value="room">9间</option>
                                <option value="room">10间</option>
                            </select>
                        </td>
                        <th>住客数</th>
                        <td>
                            <select class="people-sel">
                                <option value="people">1成人</option>
                                <option value="people">2成人</option>
                                <option value="people">3成人</option>
                                <option value="people">4成人</option>
                                <option value="people">5成人</option>
                                <option value="people">6成人</option>
                                <option value="people">7成人</option>
                                <option value="people">8成人</option>
                                <option value="people">9成人</option>
                                <option value="people">10成人</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>酒店级别</th>
                        <td colspan="3">
                            <select class="hotel-rank">
                                <option value="rank">不限</option>
                                <option value="rank">五星级/豪华</option>
                                <option value="rank">四星级/高档</option>
                                <option value="rank">三星级/舒适</option>
                                <option value="rank">二星级及以下/经济</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>关键词</th>
                        <td>
                            <input name="hotel_name" class="search" autocomplete="off" placeholder="(选填）酒店名/地标/商圈" type="text" vaule="input">
                        </td>
                    </tr>
                    </tbody>
                </table>
                <button type="submit" class="xc-content-search"value="搜索">搜索</button>
            </div>
            </form>
        </div>

        <!--内容部分左边：酒店旗舰店列表-->
        <div class="hotel-store">
            <div class="list-item">
                <img src="//pic.c-ctrip.com/htlpic/flagship/store/sands2/indexBanner.png?200325.png">
                <a class="flagship-btn" href="/hotel/hotelFlagShip.jsp">进入店铺</a>
            </div>
            <div class="list-item">
                <img src="//pic.c-ctrip.com/htlpic/flagship/store/sands2/indexBanner.png?200325.png">
                <a class="flagship-btn" href="/hotel/hotelFlagShip.jsp">进入店铺</a>

            </div>
            <div class="list-item">
                <img src="//pic.c-ctrip.com/htlpic/flagship/store/sands2/indexBanner.png?200325.png">
                <a class="flagship-btn" href="/hotel/hotelFlagShip.jsp">进入店铺</a>

            </div>
            <div class="list-item">

                <img src="//pic.c-ctrip.com/htlpic/flagship/store/sands2/indexBanner.png?200325.png">
                <a class="flagship-btn" href="/hotel/hotelFlagShip.jsp">进入店铺</a>

            </div>
            <div class="list-item">
                <img src="//pic.c-ctrip.com/htlpic/flagship/store/sands2/indexBanner.png?200325.png">
                <a class="flagship-btn" href="/hotel/hotelFlagShip.jsp">进入店铺</a>

            </div>
        </div>
    </div>

    <!--内容部分的右边-->
    <div class="xc-content-right">
        <!--右边的顶部-->
        <div class="layui-carousel" id="test10">
        <div carousel-item="">
            <div><img src="https://dimg04.c-ctrip.com/images/0zg2p12000811x858EC48.jpg"></div>
            <div><img src="https://dimg04.c-ctrip.com/images/0zg26120004iuv1iu6A96.jpg"></div>
            <div><img src="https://dimg04.c-ctrip.com/images/0zg4z120005ua03ukF1E8.jpg"></div>
            <div><img src="https://dimg04.c-ctrip.com/images/0zg6s1200072z65bp946A.jpg"></div>
            <div><img src="https://dimg04.c-ctrip.com/images/0zg35120000m0mhrwEEAC.jpg"></div>
        </div>
    </div>
        <div class="xc-content-right-middle">
            <div class="site">
                <h2>城市地标周边酒店
                    <a href="">北京</a>
                    <a href="">上海</a>
                    <a href="">广州</a>
                    <a href="">南京</a>
                    <a href="">深圳</a>
                </h2>
                <span class="dibiaoleft">
                    <a href="">全部地标></a>

                </span>
            </div>

        </div>
        <div class="zanshitu">
            <img src="https://pages.c-ctrip.com/hotel/201810/banner/1018_liansuo_PC_780x180.jpg">
        </div>
        <div class="xc-content-right-hot">
            <div style="display: none;"class="cit">
                <a href="###" class="close">x</a>
                <a href="">长沙</a>
                <a href="">贵阳</a>
                <a href="">重庆</a>
                <a href="">福州</a>
                <a href="">桂林</a>
                <a href="">合肥</a>
                <a href="">海口</a>
                <a href="">哈尔滨</a>
                <a href="">丽江</a>
                <a href="">南昌</a>
                <a href="">南宁</a>
                <a href="">昆明</a>
            </div>
            <h2 class="hot-hotel">
                热门酒店
                <a href="">上海</a>
                <a href="">北京</a>
                <a href="">南京</a>
                <a href="">成都</a>
                <a href="">深圳</a>
                <a href="">广州</a>
                <span class="hot-log">

                </span>
            </h2>

        </div>
        <!--酒店列表-->
        <div class="hotel-list">
            <div class="hotel-item">
                <div class="img-wrapper">
                    <a href="/hotel/hotelDetail.jsp"><img src="//dimg11.c-ctrip.com/images/hotel/53000/52741/941abc93388f496cb660691cf8b48bde_R_130_130.jpg"></a>
                </div>
                <div class="text-wrapper">
                    <a class="title" href="/hotel/hotelDetail.jsp"><img src="/static/imgs/hotelzan.png"> 上海如果遇见你小墅</a><br/>
                    <a class="local" href="/hotel/hotelDetail.jsp"><u>浦东陆家嘴金融贸易区 浦东新区</u></a><br/>
                    <a class="grade" href="/hotel/hotelDetail.jsp">4.9分|来自92人点评</a>
                    <p class="estimate">"周末和朋友们一起邀约去朱家角散心，搜到这家评分不错的民宿，三家人订了三间房。这家店位置离景区很近，但又没有景区内的喧闹。”</p>
                </div>
                <div class="price-wrapper">
                    <span class="icon">￥</span>
                    <span class="number">456</span>
                    <span class="up">起</span>
                </div>
            </div>
            <hr>
            <div class="hotel-item">
                <div class="img-wrapper">
                    <a href="/hotel/hotelDetail.jsp"><img src="//dimg11.c-ctrip.com/images/hotel/53000/52741/941abc93388f496cb660691cf8b48bde_R_130_130.jpg"></a>
                </div>
                <div class="text-wrapper">
                    <a class="title" href="/hotel/hotelDetail.jsp"><img src="/static/imgs/hotelzan.png"> 上海如果遇见你小墅</a><br/>
                    <a class="local" href="/hotel/hotelDetail.jsp"><u>浦东陆家嘴金融贸易区 浦东新区</u></a><br/>
                    <a class="grade" href="/hotel/hotelDetail.jsp">4.9分|来自92人点评</a>
                    <p class="estimate">"周末和朋友们一起邀约去朱家角散心，搜到这家评分不错的民宿，三家人订了三间房。这家店位置离景区很近，但又没有景区内的喧闹。”</p>
                </div>
                <div class="price-wrapper">
                    <span class="icon">￥</span>
                    <span class="number">456</span>
                    <span class="up">起</span>
                </div>
            </div>
            <hr>
            <div class="hotel-item">
                <div class="img-wrapper">
                    <a href="/hotel/hotelDetail.jsp"><img src="//dimg11.c-ctrip.com/images/hotel/53000/52741/941abc93388f496cb660691cf8b48bde_R_130_130.jpg"></a>
                </div>
                <div class="text-wrapper">
                    <a class="title" href="/hotel/hotelDetail.jsp"><img src="/static/imgs/hotelzan.png"> 上海如果遇见你小墅</a><br/>
                    <a class="local" href="/hotel/hotelDetail.jsp"><u>浦东陆家嘴金融贸易区 浦东新区</u></a><br/>
                    <a class="grade" href="/hotel/hotelDetail.jsp">4.9分|来自92人点评</a>
                    <p class="estimate">"周末和朋友们一起邀约去朱家角散心，搜到这家评分不错的民宿，三家人订了三间房。这家店位置离景区很近，但又没有景区内的喧闹。”</p>
                </div>
                <div class="price-wrapper">
                    <span class="icon">￥</span>
                    <span class="number">456</span>
                    <span class="up">起</span>
                </div>
            </div>
            <hr>
            <div class="hotel-item">
                <div class="img-wrapper">
                    <a href="/hotel/hotelDetail.jsp"><img src="//dimg11.c-ctrip.com/images/hotel/53000/52741/941abc93388f496cb660691cf8b48bde_R_130_130.jpg"></a>
                </div>
                <div class="text-wrapper">
                    <a class="title" href="/hotel/hotelDetail.jsp"><img src="/static/imgs/hotelzan.png"> 上海如果遇见你小墅</a><br/>
                    <a class="local" href="/hotel/hotelDetail.jsp"><u>浦东陆家嘴金融贸易区 浦东新区</u></a><br/>
                    <a class="grade" href="/hotel/hotelDetail.jsp">4.9分|来自92人点评</a>
                    <p class="estimate">"周末和朋友们一起邀约去朱家角散心，搜到这家评分不错的民宿，三家人订了三间房。这家店位置离景区很近，但又没有景区内的喧闹。”</p>
                </div>
                <div class="price-wrapper">
                    <span class="icon">￥</span>
                    <span class="number">456</span>
                    <span class="up">起</span>
                </div>
            </div>
            <hr>
            <div class="hotel-item">
                <div class="img-wrapper">
                    <a href="/hotel/hotelDetail.jsp"><img src="//dimg11.c-ctrip.com/images/hotel/53000/52741/941abc93388f496cb660691cf8b48bde_R_130_130.jpg"></a>
                </div>
                <div class="text-wrapper">
                    <a class="title" href="/hotel/hotelDetail.jsp"><img src="/static/imgs/hotelzan.png"> 上海如果遇见你小墅</a><br/>
                    <a class="local" href="/hotel/hotelDetail.jsp"><u>浦东陆家嘴金融贸易区 浦东新区</u></a><br/>
                    <a class="grade" href="/hotel/hotelDetail.jsp">4.9分|来自92人点评</a>
                    <p class="estimate">"周末和朋友们一起邀约去朱家角散心，搜到这家评分不错的民宿，三家人订了三间房。这家店位置离景区很近，但又没有景区内的喧闹。”</p>
                </div>
                <div class="price-wrapper">
                    <span class="icon">￥</span>
                    <span class="number">456</span>
                    <span class="up">起</span>
                </div>
            </div>
            <hr>
            <div class="hotel-item">
                <div class="img-wrapper">
                    <a href="/hotel/hotelDetail.jsp"><img src="//dimg11.c-ctrip.com/images/hotel/53000/52741/941abc93388f496cb660691cf8b48bde_R_130_130.jpg"></a>
                </div>
                <div class="text-wrapper">
                    <a class="title" href="/hotel/hotelDetail.jsp"><img src="/static/imgs/hotelzan.png"> 上海如果遇见你小墅</a><br/>
                    <a class="local" href="/hotel/hotelDetail.jsp"><u>浦东陆家嘴金融贸易区 浦东新区</u></a><br/>
                    <a class="grade" href="/hotel/hotelDetail.jsp">4.9分|来自92人点评</a>
                    <p class="estimate">"周末和朋友们一起邀约去朱家角散心，搜到这家评分不错的民宿，三家人订了三间房。这家店位置离景区很近，但又没有景区内的喧闹。”</p>
                </div>
                <div class="price-wrapper">
                    <span class="icon">￥</span>
                    <span class="number">456</span>
                    <span class="up">起</span>
                </div>
            </div>
            <hr>

        </div>
    </div>
</div>


<%-- jquery--%>
<script src="../static/js/jquery.min.js"></script>
<%--layui js--%>
<script src="../static/layui/layui.all.js"></script>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '778px'
            ,height: '235px'
            ,interval: 2300
        });


        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>


</body>
</html>
